<!--Created by 熊超超 on 2017/8/4.-->
<template>
  <air-scroll pullDownRefresh @pullingDown="onPullingDown" ref="scroll" :data="list" mouseWheel>
    <div class="detail">
      <mu-card class="m-b-20" style="background-color: transparent;">
        <mu-card-text v-for="value in list" :key="value.udid">
            <li>设备名称：{{ value.nickName }}</li>
            <li>系统版本：{{ value.osversion }}</li>
            <li>当前电量：{{ value.batteryLevel }}</li>
            <li>当前运营商：{{ value.currentCarrierNetwork }}</li>
            <li>手机号码：{{ value.phoneNumber }}</li>
            <li>设备序列号：{{ value.serialNumber }}</li>
        </mu-card-text>
          <select class="select" v-model="selected">
              <option disabled value="">选择指令</option>
              <option value="lock">锁屏</option>
              <option value="queryAllApp">查看已安装的应用程序</option> 
              <option value="queryDeviceDetail">查看设备详情</option>
              <option value="lostMode">开启丢失模式</option>
              <option value="recover">还原出厂设置</option>  
              <option value="installApp">安装应用</option>  
              <option value="cleanPasscode">清除锁屏密码</option>  
              <option value="more">更多功能</option>  
          </select>
          <mu-text-field v-model="pin" hintText="请输入目标设备上登录的appleID密码" style="width:375px"/>
          <mu-text-field v-model="appId" hintText="请输入指定应用的appId" style="width:375px"/>
          <mu-icon-button @click="sendOrder" class="m-t-40">
            发送到手机
          </mu-icon-button>
          <div>
            已安装应用：
          <mu-card-text v-for="value in list[0].apps" :key="value.id">
            <div style="">
            <li>应用名称：{{ value.appName }}</li>
            <mu-flat-button label="卸载" secondary class="m-l-16" @click="removeApp(value.id)">
            <cc-icon name="change-date" size="36" />
          </mu-flat-button>
            </div>
        </mu-card-text>
        </div>
      </mu-card>
    </div>
  </air-scroll>
</template>

<script>
  import {mapState} from 'vuex'
  import mixin from '$g/mixin'
  import CFlight from '../../common/components/C-Flight'
  // import Bus from '../bus.js'
  export default {
    components: {CFlight},
    mixins: [mixin.updateBar],
    data() {
      return {
        headerBar: {
          title: () => <div><cc-icon name="msg" size="36" />{this.$t(this.list[0].nickName)}</div>,
          rightBtn: [{text: '删除'}]
        },
        footerBar: {active: '/fly'},
        selected: '',
        list: [],
        orderType: '',
        appId: '',
        pin: '',
        identifier: ''
      }
    },
    mounted() {},
    computed: {
      ...mapState({
        user: state => state.my.user
      })
    },
    created () {},
    activated() {
      this.getDeviceDetail(this.$store.state.device.udid)
      console.log(this.$store.state.device.udid)
    },
    methods: {
      onPullingDown () {
        this.getDeviceDetail(this.$store.state.device.udid)
      },
      async getDeviceDetail(udid) {
        console.log(udid)
        const data = await this.$store.dispatch('queryOneDevice', {udid: udid})
        if (data) {
          this.list = data.data
        } else {
          this.$refs.scroll.forceUpdate()
        }
      },
      sendOrder () {
        this.$store.dispatch('sendOrder', {udid: this.list[0].udid, orderType: this.orderType, pin: this.pin, appId: this.appId, identifier: this.identifier}).then(
          data => {
            if (data.success) {
              alert(data.msg)
            }
          }
        )
      },
      removeApp (val) {
        this.orderType = 'removeApp'
        this.identifier = val
        this.sendOrder()
      }
    },
    // 改变指令监听
    watch: {
      selected: {
        handler: function (val) {
          this.orderType = val
          switch (val) {
            case 'recover' :
              alert('抹除数据需要设备上登录的Apple账号密码，请输入。另外此操作将还原您指定的设备，请慎用！')
              break
            case 'installApp' :
              alert('安装应用需要制定应用的appId，请输入，关于appId的获取请点击“消息”')
              break
            default:
              break
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.select {
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.28889rem;
  line-height: 0.83333rem;
  padding-left: 0.44444rem;
  width: 30%;
}
</style>
